import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import CommentList from './comment/commentList';
import CommentInput from './comment/commentInput';
import PropTypes from 'prop-types';
import InputNameV from './highterComponent/inputName';
class App extends Component{
  constructor(){
    super();
    this.state = {
      commentLists:[]
    }
  }
  submitComment(comment){
    let thisCommentList = this.state.commentLists;
    thisCommentList.push(comment);
    this.setState({
      commentLists:thisCommentList
    });
  }
  _getCommentList(){
    let commentList = localStorage.getItem("commentList");
    if(commentList!=null){
      commentList = JSON.parse(commentList);
    }else{
      commentList = [];
    }

     return commentList
  }
  handleDelete(item){
    let newCommentList =  this.state.commentLists.filter(comment=>{
        return item!==comment ;
      });
    this.setState({
      commentLists:newCommentList
    });
    localStorage.setItem("commentList",JSON.stringify(newCommentList));
  }
  componentWillMount(){
    this.setState({
      commentLists:this._getCommentList()
    });
  }
  render(){
    return (
      <div className="wrap">
        <CommentInput onSubmit={this.submitComment.bind(this)}/>
        <CommentList commentLists={this.state.commentLists} onDeleteCometn={this.handleDelete.bind(this)}/>
      </div>
    )
  }
}

class Input extends Component {
  inputChange(event){
    if(this.props.handleChange){
      let numberConut = event.target.value;
      this.props.handleChange(numberConut);
    }
  }
  render () {
    return (
      <div>
        <input type='number' onChange={this.inputChange.bind(this)}/>
      </div>
    )
  }
}

class PercentageShower extends Component {
  render () {
    return (
      <div>{this.props.percentValue}</div>
    )
  }
}

class PercentageApp extends Component {
  constructor(){
    super();
    this.state={
      count:'0.00%'
    }
  }
  valueChange(count){
    let percentValue = Math.round(count*10000)/100;
    let s = percentValue.toString();
      let rs = s.indexOf('.');
      if (rs < 0) {
        rs = s.length;
        s += '.';
      }
      while (s.length <= rs + 2) {
        s += '0';
      }
      s+='%';
    this.setState({
      count:s
    });
  }
  render () {
    return (
      <div>
        <Input handleChange={this.valueChange.bind(this)}/>
        <PercentageShower percentValue={this.state.count}/>
      </div>
    )
  }
}

class Clock extends Component{
  constructor(){
    super();
    this.state={
      time:new Date()
    }
  }
  componentWillMount(){
    this.timer = setInterval(()=>{
      this.setState({
          time:new Date()
      });
    },1000);
  }
  componentWillUnmount(){
    clearInterval(this.timer);
  }
  render(){
    return(
      <div>
        <h1>现在的时间是</h1>
        <h2>{this.state.time.toLocaleTimeString()}</h2>
      </div>
    )
  }
}

class IndexClock extends Component{
  constructor(){
    super();
    this.state={
      isShowClock:true
    }
  }
  handleClick(){
    this.setState({
      isShowClock:!this.state.isShowClock
    })
  }
  render(){
    return(
      <div>
        <button onClick={this.handleClick.bind(this)}>{
          this.state.isShowClock ? "隐藏时钟":"显示时钟"
        }</button>
      {
        this.state.isShowClock ?   <Clock/>:null
      }
      </div>
    )
  }
}
class Editor extends Component{
  constructor(){
    super();
  }
static propTypes={
  comment:PropTypes.object.isRequired
}
  render(){
    return (
      <div>
        {this.props.comment.name}
      </div>
    )
  }
}
class InputIndex extends Component{
  render(){
    return (
        <div>
          <InputNameV />
        </div>
    )
  }
}
ReactDOM.render(<App />,document.getElementById("root"))
